<template>
    <div class="body-inner">
        <h1 class="body-title">
            <i :class="$bodyTitle.icon"></i>
            <span>{{ $bodyTitle.description }}</span>
        </h1>
        <div class="line10"></div>
        <div class="body-main">
            <div class="plugin-list">
                <div @click="call(v.name)" class="line" v-for="(v, i) in pluginMenu" :key="i">
                    <div class="icon">
                        <img v-if="v.icon" :src="v.icon" width="64" />
                        <i v-else class="appfont app-plugin"></i>
                    </div>
                    <div class="info">
                        <h2>{{ v.name }}</h2>
                        <p>{{ v.discription }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'kit_plugin',
    data () {
        return {
            pluginMenu: []
        };
    },
    mounted () {
        /*获取插件列表*/
        this.$pluginManager.getlist();

        /*监听ipc通知插件列表*/
        this.$pluginManager.receivelist(menu => this.pluginMenu = menu);

        /*监听ipc通知插件执行结果*/
        this.$pluginManager.receiveExecutiveResult(({ errCode, errMsg }) => {
            (errCode === 0) ? this.$messageSuccess(errMsg) : this.$alert(errMsg);
        });
    },
    methods: {
        /*执行插件*/
        call (name) {
            this.$pluginManager.call(name);
        }
    }
};
</script>

<style scoped lang="less">
.plugin-list {
    .line {
        border                : 1px solid fade(#fff, 10%);
        -webkit-border-radius : 10px;
        -moz-border-radius    : 10px;
        border-radius         : 10px;
        padding               : 15px;
        display               : flex;
        cursor                : pointer;
        .noSelect;

        &:hover {
            background : fade(#fff, 5%);

            .info p {
                .ellipsis-text-mul(99);
            }
        }

        .icon {
            width        : 64px;
            height       : 64px;
            flex-grow    : 0;
            flex-shrink  : 0;
            margin-right : 10px;

            img {
                display : block;
                width   : 100%;
                height  : 100%;
            }

            i {
                display               : block;
                width                 : 100%;
                height                : 100%;
                display               : flex;
                align-items           : center;
                justify-content       : center;
                font-size             : 30px;
                background            : fade(@blue, 10%);
                -webkit-border-radius : 5px;
                -moz-border-radius    : 5px;
                border-radius         : 5px;
            }
        }

        .info {
            flex-grow   : 1;
            flex-shrink : 1;

            h2 {
                padding-bottom : 5px;
                font-size      : 20px;
            }

            p {
                color : #999;
                .ellipsis-text-mul(2);
            }
        }
    }
}
</style>
